<template>
  <div>
    <ep-notice-bar class="m-b-10" left-icon="ion-volume-high" text="此处为mock接口，仅供参考" />
    <ep-advance-card title="查询" theme="theme-1">
      <ep-form ref="searchForm" :form="searchForm" name-width="0px">
        <ep-row :gutter="10">
          <ep-col :col="6">
            <ep-form-item attr="name">
              <ep-input v-model="searchForm.name" placeholder="姓名"></ep-input>
            </ep-form-item>
          </ep-col>
          <ep-col :col="6">
            <ep-form-item attr="addr">
              <ep-input v-model="searchForm.addr" placeholder="地址"></ep-input>
            </ep-form-item>
          </ep-col>
          <ep-col :col="6">
            <ep-form-item attr="action">
              <ep-button type="primary" icon="ios-refresh-empty" @click="reset">重置</ep-button>
              <ep-button type="primary" icon="search" @click="refresh(true)">查询</ep-button>
            </ep-form-item>
          </ep-col>
        </ep-row>
      </ep-form>
    </ep-advance-card>
    <ep-advance-card title="结果" class="m-t-20" theme="theme-1">
      <div class="m-t-5 m-b-5">
        <ep-button type="primary" @click="addEditTable" icon="3-md-add">新增</ep-button>
        <ep-button type="primary" @click="deleteEditTableRow" icon="3-md-trash">删除</ep-button>
        <ep-button type="primary" @click="resetEditTable" icon="3-md-refresh">重置</ep-button>
        <ep-button type="primary" @click="saveEditTable" icon="3-md-checkmark">保存</ep-button>
      </div>
      <ep-table can-edit head-color ref="searchTable" :data="epData">
        <ep-table-item type="select"></ep-table-item>
        <ep-table-item column="name" title="姓名"></ep-table-item>
        <ep-table-item column="addr" title="地址"></ep-table-item>
      </ep-table>
      <ep-pager
        class="m-t-10 m-b-10"
        right
        :now-page="epPager.offset"
        :page-size="epPager.limit"
        :total-num="epDataTotal"
        @change="handlePageChange"
        @size-change="sizeChange"
      ></ep-pager>
    </ep-advance-card>
  </div>
</template>

<script>
import searchMixin from '@/common/mixins/searchMixin'
import { demoTableSearch, demoTableSave } from '@/api/demo'
export default {
  name: 'basic-table',
  mixins: [searchMixin],
  data() {
    return {
      api: demoTableSearch,
      saveApi: demoTableSave,
      searchForm: {
        name: '',
        addr: ''
      },
      epPager: {
        limit: 5,
        offset: 1
      }
    }
  }
}
</script>

<style></style>
